<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button{
            width: 57px;
        }
    </style>
    <script>
         function f(val) {
             if (val=='tg'){
                 var c = document.getElementById('a').value;
                 var crr = c.split("");
                 var zf = " ";
                 for (var i = 0; i <crr.length ; i++) {
                     if (i==crr.length-1){
                         document.getElementById('a').value = zf;
                         return;
                     }
                     zf+=crr[i];
                 }
             }
             var zfc = "                                           ";
             var b= document.getElementById('a').value.trim();
             val = b+val;
             var a = "";
             for (var i = 0; i < zfc.length-val.length; i++) {
                 if (i==zfc.length-val.length-1){
                     a+=val;
                     break;
                 }
                  a+=" ";
             }
             document.getElementById('a').value = a;
         }
    </script>
</head>
<body>
    <input type="text" style="background-color: black;color: white" id="a"><br>
    <button id="0" onclick="f(this.id)">0</button><button id="1" onclick="f(this.id)">1</button><button id="2" onclick="f(this.id)">2</button><br>
    <button id="3" onclick="f(this.id)">3</button><button id="4" onclick="f(this.id)">4</button><button id="5" onclick="f(this.id)">5</button><br>
    <button id="6" onclick="f(this.id)">6</button><button id="7" onclick="f(this.id)">7</button><button id="8" onclick="f(this.id)">8</button><br>
    <button id="9" onclick="f(this.id)">9</button><button id="." onclick="f(this.id)">.</button><button id="tg" onclick="f(this.id)">退格</button>
</body>
</html>